<template>
  <div id="app">
    <h1>vue-drag-verify2</h1>
    <h3>基于vue-drag-verify二次开发的vue组件</h3>
    <drag-verify-img-chip
      ref="dragVerify"
      :imgsrc="img"
      :isPassing.sync="isPassing"
      :showRefresh="true"
      :barWidth="40"
      handlerIcon="fa fa-angle-double-right"
      successIcon="fa fa-check-circle-o"
      refreshIcon="fa fa-refresh"
      @refresh="handleRefresh"
      @passcallback="handlePass"
    >
    </drag-verify-img-chip>
    <button
      style="margin-top:10px"
      @click="handleReset"
    >reset</button>
  </div>
</template>

<script>
import dragVerifyImgChip from "../dist/index.js";
import t2 from "../src/assets/t2.png";
import t3 from "../src/assets/t3.png";
export default {
  name: "app",
  components: {
    dragVerifyImgChip,
    t2,
    t3,
    img: t3
  },
  data() {
    return {
      isPassing: false
    };
  },
  methods: {
    handleReset() {
      this.isPassing = false;
      this.$refs.dragVerify.reset();
    },
    handlePass() {
      alert("success");
    },
    handleRefresh() {
      this.img = this.img == this.t3 ? this.t2 : this.t3;
    }
  }
};
</script>

<style>
html {
  background: rgba(20, 80, 141, 0.25);
  user-select: none;
}
.verify {
  margin: 0 auto;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>